<template>
  <div>
    <el-container>
  <el-header class="header" height="100px" style="line-height:100px;color:#4d4fef"><span class="font">Driving Test Book</span><span class="hou"><i class="el-icon-loading"></i>后台管理中心</span>
          <!-- <img src="/admin/12.png" height="50px"/> -->
      </el-header>
  <el-container>
    <el-aside width="250px" class="aside">
      <el-container>
      
      <el-container>
        <el-aside width="250px" class="font user"   height="560px">
          <el-menu :default-active="$route.path" class="el-menu-vertical-demo" 
            background-color=" #d3dbe7" router :default-openeds="openeds">
            <el-submenu index="1">
              <template slot="title">
                <span slot="title" class="font1"><i class="el-icon-user-solid"></i>用户管理中心</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/user" class="item"><i class="el-icon-caret-left
e"></i>账号管理<i class="el-icon-caret-right
e"></i></el-menu-item>
                <el-menu-item index="/admin/booking" class="item"><i class="el-icon-caret-left
e"></i>用户预约<i class="el-icon-caret-right
e"></i></el-menu-item>
                <el-menu-item index="/admin/order" class="item"><i class="el-icon-caret-left
e"></i>用户订单<i class="el-icon-caret-right
e"></i></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
  
        <el-container>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
      </el-container>
      <el-container>
        <el-aside width="250px" class="font title">
          <el-menu :default-active="$route.path" class="el-menu-vertical-demo" 
            background-color=" #d3dbe7"  height="550px" router :default-openeds="openeds">
            <el-submenu index="1">
              <template slot="title">
                <span slot="title" class="font1"> <i class="el-icon-document"></i>题库管理中心</span>
              </template>
               <el-menu-item-group>
                <el-menu-item index="/admin/question" class="item"><i class="el-icon-caret-left
e"></i>考试数据<i class="el-icon-caret-right
e"></i></el-menu-item>
                <el-menu-item index="/admin/manager" class="item"><i class="el-icon-caret-left
e"></i>题库管理<i class="el-icon-caret-right
e"></i></el-menu-item>
                <el-menu-item index="" class="item"></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
          </el-aside>
        <el-container>
          <el-header>Header</el-header>
          <el-main>Main</el-main>
        </el-container>
      </el-container>


       <el-container>
        <el-aside width="250px" class="font store">
           <el-menu :default-active="$route.path"  class="el-menu-vertical-demo" 
            background-color="#bbc9ee"  router :default-openeds="openeds">
            <el-submenu index="1">
              <template slot="title">
                <span slot="title" class="font1"> <i class="el-icon-menu"></i>商城管理中心</span>
              </template>
               <el-menu-item-group>
                <el-menu-item index="/admin/carlogo" class="item"><i class="el-icon-caret-left
e"></i>车品牌<i class="el-icon-caret-right
e"></i></el-menu-item>
                <el-menu-item index="/admin/car" class="item"><i class="el-icon-caret-left
e"></i>车商场<i class="el-icon-caret-right
e"></i></el-menu-item>
                <el-menu-item index="/admin/comment" class="item"></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
         </el-aside>
        <el-container>
          <el-header>Header</el-header>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
      <el-container>
        <el-aside width="250px" class="font driving">
           <el-menu :default-active="$route.path"  class="el-menu-vertical-demo" 
            background-color="#bbc9ee"  router :default-openeds="openeds">
            <el-submenu index="1">
              <template slot="title">
                <span slot="title" class="font1"> <i class="el-icon-location"></i>驾校教练管理</span>
              </template>
               <el-menu-item-group>
                <el-menu-item index="/admin/drivingschool" class="item"><i class="el-icon-caret-left
e"></i>驾校管理<i class="el-icon-caret-right
e"></i></el-menu-item>
                <el-menu-item index="/admin/coach" class="item"><i class="el-icon-caret-left
e"></i>教练管理<i class="el-icon-caret-right
e"></i></el-menu-item>
                <el-menu-item index="/admin/comment" class="item"><i class="el-icon-caret-left
e"></i>评论管理<i class="el-icon-caret-right
e"></i></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
         </el-aside>
        <el-container>
          <el-header>Header</el-header>
          <el-main></el-main>
        </el-container>
      </el-container>
      
    </el-aside>
    <el-container>
      <el-main><router-view/>        <div class="containerfu">
<div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12">
                                <!-- `.chat-wrapper` fills all available space of container -->
                                <div class="chat-wrapper">

                                    <!-- Make card full height of `.chat-wrapper` -->
                                    <div class="card flex-grow-1 position-relative overflow-hidden">

                                        <!-- Make row full height of `.card` -->
                                        <div class="row no-gutters h-100">
                                            <div class="chat-sidebox col">

                                                <!-- Chat contacts header -->
                                                <div class="flex-grow-0 px-4">
                                                    <div class="media align-items-center">
                                                        <div class="media-body">
                                                            <input type="text" class="form-control chat-search my-3" placeholder="Search...">
                                                            <div class="clearfix"></div>
                                                        </div>
                                                        <a href="javascript:void(0)" class="chat-sidebox-toggler d-lg-none d-block text-muted text-large font-weight-light pl-3">×</a>
                                                    </div>
                                                    <hr class="border-light m-0">
                                                </div>
                                                <!-- / Chat contacts header -->
                                                <!-- Wrap `.chat-scroll` to properly position scroll area. Remove this wtapper if you don't need scroll -->
                                                <div class="flex-grow-1 position-relative">
                                                    <div class="chat-contacts list-group chat-scroll py-3 ps">

                                                        <!-- Online -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action online">
                                                            <img src="assets/img/avatars/2.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Leon Wilson
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Online</div>
                                                            </div>
                                                            <div class="badge badge-outline-success">5</div>
                                                        </a>

                                                        <!-- Online -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action online">
                                                            <img src="assets/img/avatars/3.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Allie Rodriguez
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Online</div>
                                                            </div>
                                                        </a>

                                                        <!-- Online & Active -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action online active">
                                                            <img src="assets/img/avatars/4.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Kenneth Frazier
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Online</div>
                                                            </div>
                                                        </a>

                                                        <!-- Online -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action online">
                                                            <img src="assets/img/avatars/5.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Nellie Maxwell
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Online</div>
                                                            </div>
                                                            <div class="badge badge-outline-success">2</div>
                                                        </a>

                                                        <!-- Online -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action online">
                                                            <img src="assets/img/avatars/6.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Mae Gibson
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Online</div>
                                                            </div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/7.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Alice Hampton
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/8.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Hallie Lewis
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                            <div class="badge badge-outline-success">1</div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/9.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Amanda Warner
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/10.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Wayne Morgan
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/11.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Belle Ross
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/12.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Arthur Duncan
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                        </a>

                                                    <div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div>
                                                    <div class="chat-contacts list-group chat-scroll py-3 ps">

                                                        <!-- Online -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action online">
                                                            <img src="assets/img/avatars/2.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Leon Wilson
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Online</div>
                                                            </div>
                                                            <div class="badge badge-outline-success">5</div>
                                                        </a>

                                                        <!-- Online -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action online">
                                                            <img src="assets/img/avatars/3.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Allie Rodriguez
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Online</div>
                                                            </div>
                                                        </a>

                                                        <!-- Online & Active -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action online active">
                                                            <img src="assets/img/avatars/4.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Kenneth Frazier
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Online</div>
                                                            </div>
                                                        </a>

                                                        <!-- Online -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action online">
                                                            <img src="assets/img/avatars/5.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Nellie Maxwell
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Online</div>
                                                            </div>
                                                            <div class="badge badge-outline-success">2</div>
                                                        </a>

                                                        <!-- Online -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action online">
                                                            <img src="assets/img/avatars/6.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Mae Gibson
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Online</div>
                                                            </div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/7.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Alice Hampton
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/8.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Hallie Lewis
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                            <div class="badge badge-outline-success">1</div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/9.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Amanda Warner
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/10.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Wayne Morgan
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/11.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Belle Ross
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                        </a>

                                                        <!-- Offline -->
                                                        <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                                                            <img src="assets/img/avatars/12.png" class="d-block ui-w-40 rounded-circle" alt="">
                                                            <div class="media-body ml-3">
                                                                Arthur Duncan
                                                                <div class="chat-status small">
                                                                    <span class="badge badge-dot"></span>&nbsp; Offline</div>
                                                            </div>
                                                        </a>

                                                    <div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div><!-- / .chat-contacts -->
                                                </div>

                                            </div>
                                            <div class="d-flex col flex-column">

                                                <!-- Chat header -->
                                                <div class="flex-grow-0 py-3 pr-4 pl-lg-4">

                                                    <div class="media align-items-center">
                                                        <a href="javascript:void(0)" class="chat-sidebox-toggler d-lg-none d-block text-muted text-large px-4 mr-2">
                                                            <i class="ion ion-md-more"></i>
                                                        </a>

                                                        <div class="position-relative">
                                                            <span class="badge badge-dot badge-success indicator"></span>
                                                            <img src="assets/img/avatars/4.png" class="ui-w-40 rounded-circle" alt="">
                                                            <div class="clearfix"></div>
                                                        </div>
                                                        <div class="media-body pl-3">
                                                            <strong>Kenneth Frazier</strong>
                                                            <div class="text-muted small">
                                                                <em>Typing...</em>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <button type="button" class="btn btn-primary btn-round icon-btn mr-1">
                                                                <i class="ion ion-ios-call"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-secondary btn-round icon-btn mr-1">
                                                                <i class="ion ion-md-videocam"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-default btn-round icon-btn">
                                                                <i class="ion ion-ios-more"></i>
                                                            </button>
                                                        </div>
                                                    </div>

                                                </div>
                                                <hr class="flex-grow-0 border-light m-0">
                                                <!-- / Chat header -->

                                                <!-- Wrap `.chat-scroll` to properly position scroll area. Remove this wtapper if you don't need scroll -->
                                                <div class="flex-grow-1 position-relative">

                                                    <!-- Remove `.chat-scroll` and add `.flex-grow-1` if you don't need scroll -->
                                                    <div class=" chat-scroll p-4 ps ps--active-y">

                                                        <div class="chat-message-right mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/1.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:33 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 mr-3">
                                                                <div class="font-weight-semibold mb-1">You</div>
                                                                Lorem ipsum dolor sit amet, vis erat denique in, dicunt prodesset te vix.
                                                            </div>
                                                        </div>

                                                        <div class="chat-message-left mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/4.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:34 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 ml-3">
                                                                <div class="font-weight-semibold mb-1">Kenneth Frazier</div>
                                                                Sit meis deleniti eu, pri vidit meliore docendi ut, an eum erat animal commodo.
                                                            </div>
                                                        </div>

                                                        <div class="chat-message-right mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/1.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:35 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 mr-3">
                                                                <div class="font-weight-semibold mb-1">You</div>
                                                                Cum ea graeci tractatos.
                                                            </div>
                                                        </div>

                                                        <div class="chat-message-left mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/4.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:36 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 ml-3">
                                                                <div class="font-weight-semibold mb-1">Kenneth Frazier</div>
                                                                Sed pulvinar, massa vitae interdum pulvinar, risus lectus porttitor magna, vitae commodo lectus mauris et velit. Proin ultricies placerat imperdiet. Morbi varius quam ac venenatis
                                                                tempus.
                                                            </div>
                                                        </div>

                                                        <div class="chat-message-left mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/4.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:37 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 ml-3">
                                                                <div class="font-weight-semibold mb-1">Kenneth Frazier</div>
                                                                Cras pulvinar, sapien id vehicula aliquet, diam velit elementum orci.
                                                            </div>
                                                        </div>

                                                        <div class="chat-message-right mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/1.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:38 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 mr-3">
                                                                <div class="font-weight-semibold mb-1">You</div>
                                                                Lorem ipsum dolor sit amet, vis erat denique in, dicunt prodesset te vix.
                                                            </div>
                                                        </div>

                                                        <div class="chat-message-left mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/4.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:39 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 ml-3">
                                                                <div class="font-weight-semibold mb-1">Kenneth Frazier</div>
                                                                Sit meis deleniti eu, pri vidit meliore docendi ut, an eum erat animal commodo.
                                                            </div>
                                                        </div>

                                                        <div class="chat-message-right mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/1.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:40 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 mr-3">
                                                                <div class="font-weight-semibold mb-1">You</div>
                                                                Cum ea graeci tractatos.
                                                            </div>
                                                        </div>

                                                        <div class="chat-message-right mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/1.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:41 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 mr-3">
                                                                <div class="font-weight-semibold mb-1">You</div>
                                                                Morbi finibus, lorem id placerat ullamcorper, nunc enim ultrices massa, id dignissim metus urna eget purus.
                                                            </div>
                                                        </div>

                                                        <div class="chat-message-left mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/4.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:42 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 ml-3">
                                                                <div class="font-weight-semibold mb-1">Kenneth Frazier</div>
                                                                Sed pulvinar, massa vitae interdum pulvinar, risus lectus porttitor magna, vitae commodo lectus mauris et velit. Proin ultricies placerat imperdiet. Morbi varius quam ac venenatis
                                                                tempus.
                                                            </div>
                                                        </div>

                                                        <div class="chat-message-right mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/1.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:43 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 mr-3">
                                                                <div class="font-weight-semibold mb-1">You</div>
                                                                Lorem ipsum dolor sit amet, vis erat denique in, dicunt prodesset te vix.
                                                            </div>
                                                        </div>

                                                        <div class="chat-message-left mb-4">
                                                            <div>
                                                                <img src="assets/img/avatars/4.png" class="ui-w-40 rounded-circle" alt="">
                                                                <div class="text-muted small text-nowrap mt-2">2:44 am</div>
                                                            </div>
                                                            <div class="flex-shrink-1 bg-lighter rounded py-2 px-3 ml-3">
                                                                <div class="font-weight-semibold mb-1">Kenneth Frazier</div>
                                                                Sit meis deleniti eu, pri vidit meliore docendi ut, an eum erat animal commodo.
                                                            </div>
                                                        </div>

                                                    <div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; height: 671px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 387px;"></div></div></div>
                                                </div>

                                                <!-- Chat footer -->
                                                <hr class="border-light m-0">
                                                <div class="flex-grow-0 py-3 px-4">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="Type your message">
                                                        <div class="input-group-append">
                                                            <button type="button" class="btn btn-primary">Send</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- / Chat footer -->

                                            </div>
                                        </div>
                                        <!-- / .row -->
                                    </div>
                                    <!-- / .card -->

                                </div>
                                <!-- / .chat-wrapper -->
                            </div>
                        </div>
                    </div>
    </div></el-main>
    </el-container>
  </el-container>
</el-container>
  </div>
</template>
    <script src="assets/js/vendor.js"></script>

    <script src="assets/js/pages/pages_chat.js"></script>
    <!-- Demo -->
    <script src="assets/js/script.js"></script>
<script>
import '/public/css/style.css'
// import '/public/css/googleapis.css'
import '../elementui/element.js'
import 'element-ui/lib/theme-chalk/index.css';
import Vue from 'vue';
import { carousel, Select,Descriptions,DescriptionsItem} from 'element-ui';
export default {
  data() {
    return {
      openeds: ['1'],
    }
  },
}
</script>
<style lang="scss"scoped>
* {
  margin: 0;
  padding: 0;

}
.header{
  border: 2px solid #fff;
  border-bottom: none;
  font-size: 40px;
  font-weight: 800;
  background:linear-gradient(to right,#D3DCE6,#798BBC);
  text-shadow: 0 0 10px #fff,
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 40px #fff,
      0 0 80px #fff,
      0 0 120px #fff,
      0 0 160px #fff;
     .font{
       padding:0 50px 0 10px;
          letter-spacing: 5px;
          display:inline-block;
          font-weight:bold;
          color:#def;
  background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%,
#CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
       -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%; 
         -webkit-animation: masked-animation 4s linear infinite;
     }
    .hou{
      color: #798BBC;
      letter-spacing: 10px;
       i{
      margin-right: 60px;
     }
    }
}
	@keyframes masked-animation {
	    0% {
	        background-position: 0  0;
	    }
	    100% {
	        background-position: -100%  0;
	    }
	}
.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.aside{
  width: 250px;
  overflow: hidden;
  user-select: none;
  border-left: 2px solid #fff;
}
.user{
  height: 230px;
  background:#798BBC;
}
.title{
  background:linear-gradient(#D3DCE6 20%,#bbc9ee);
}
.store{
 background:linear-gradient(#bbc9ee,#bbc9ee);
}
.driving{
 background:linear-gradient(#bbc9ee 20%,#8398d3)
}
.font {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  font-weight: bold;
  font-size: larger;
  font-family: serif;
}
.font1{
  color: #333;
  text-align: center;
    font-size: large;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
    height: 350px;
    border-radius: 20px;
    padding: 10px;
    border: 2px solid #ffffff;
    cursor: grab;
    color: #fff;
    background: linear-gradient(to right, #000000, #798BBC);
  
    span {
      display: block;
      width: 200px;
    }
  }
  .font1:hover {
    color: #dbddc4;
    text-shadow: 0 0 10px #fff,
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 40px #fff,
      0 0 80px #fff,
      0 0 120px #fff,
      0 0 160px #fff;
  }
    .item {
      font-size: large;
      color: #fff;
      text-shadow: 0 0 10px rgb(246, 246, 246),
                   0 0 10px rgb(239, 240, 198),
                   0 0 10px rgb(239, 240, 198),
                   0 0 10px rgb(72, 128, 214);
      font-family: serif;
      border-bottom: 1px dotted #fff;
    }
  
    .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    width: 100%;
  }
  
  body>.el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

</style>